<template>
  <div class="lotteryTree lotteryTreePersonl">
    <div class="userMessage">
      <div class="userInfo clearFiex">
        <div class="userHead floatLeft">
          <img :src="userLogo" alt="">
        </div>
        <div class="userContent floatLeft">
          <p>{{userMessage.userName}}，</p>
          <p>欢迎您</p>
        </div>
      </div>
      <div class="userAmount">
        <div class="amountNavTit">
          <p v-for="(amountItem,amoIndex) in amountNavTitData">
            <span :class="{amount:true,on:curAmoIndex == amoIndex}"
                  @click="amoNavTitEvent(amoIndex)">{{amountItem}}</span><span
              v-if="amoIndex<amountNavTitData.length-1">|</span>
          </p>
        </div>
        <p :class="{overWidth:(''+userMessage.amount).length>11,money:true}" v-if="curAmoIndex=='0'">
          {{userMessage.amount||'0'}}</p>
        <p :class="{overWidth:(''+userMessage.amount).length>11,money:true}" v-if="curAmoIndex=='1'">
          {{userMessage.fgAmount||'0'}}</p>
      </div>
      <div class="userBtnBox clearFiex" v-if="curAmoIndex=='0'">
        <router-link :to="{name:'topUp',query:{id:4}}" tag='p'>充值</router-link>
        <router-link :to="{name:'withdrawal',query:{id:5}}" tag="p">提现</router-link>
      </div>
      <div class="userBtnBox clearFiex" v-if="curAmoIndex=='1'">
        <p @click="amountChangeEnent(0)">转入</p>
        <p @click="amountChangeEnent(1)">转出</p>
      </div>
    </div>
    <div class="treeListBox scrollBar">
      <div class="personalTreeList" v-for="(listDataItem,listDataIndex) in lotteryTreeData.listData">
        <div class="treeListTitle relative" @click="showSecondTree(listDataIndex)"
             :class="{'on': listDataIndex === listId}"><img :src="listDataItem.icon" alt="">{{listDataItem.title}}
          <Icon class="downArrow"></Icon>
        </div>
      </div>
    </div>
    <!--电游余额转入转出-->
    <div class="amountChangeBox" v-if="isShowAmoMessBox">
      <div class="messageBox absmiddle">
        <div class="amoMessBoxTit clearFiex">
          <P class="floatLeft">{{amoMessTitTxt}}</P>
          <span class="floatRight" @click="closeAmoMess">关闭</span>
        </div>
        <div class="amoMessBoxCon">
          <p>{{amoMessConTxt}}</p>
          <p>{{isRollin?userMessage.amount:userMessage.fgAmount}}</p>
          <input type="text" v-model="fgRollAmount" :placeholder="placeholderTxt">
          <div class="confirmBtn" @click="confirmRollEvent">确认提交</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import './main.scss'
  import {mapState} from 'vuex';
  
  export default {
    data() {
      return {
        lotteryTreeData: {
          listData: [
            {
              navId: 1,
              title: "我的彩票",
              icon: require('../../../assets/images/personal/treeIcon/per1.png'),
            },
            {
              navId: 2,
              title: "账号信息",
              icon: require('../../../assets/images/personal/treeIcon/per2.png'),
            },
            {
              navId: 3,
              title: "投注记录",
              icon: require('../../../assets/images/personal/treeIcon/per3.png'),
            },
            {
              navId: 4,
              title: "账户明细",
              icon: require('../../../assets/images/personal/treeIcon/per4.png'),
            },
            {
              navId: 5,
              title: "充值",
              icon: require('../../../assets/images/personal/treeIcon/per5.png'),
            },
            {
              navId: 6,
              title: "提现",
              icon: require('../../../assets/images/personal/treeIcon/per6.png'),
            }
          ],
        },
        amountNavTitData: ['账户余额', '电游余额'],//余额导航切换
        curAmoIndex: 0,//当前余额导航下标
        listId: 0,
        isAgent: '0',
        fgRollAmount: '',//转入转出金额
        isShowAmoMessBox: false,//是否弹出余额转入转出框
        amoMessTitTxt: '',//余额弹出标题
        amoMessConTxt: '',//余额弹出标题
        placeholderTxt: '',//余额弹出标题
        amountProLock: false,//余额操作锁
        isRollin: false,//是否是转入
        userMessage: {
          userName: '',
          amount: '',
          fgAmount: '',
        },//用户信息
        userLogo: require('../../../assets/images/personal/myLottery/userHeadDefault.png'),
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.mutations.userInformation, //登录状态
        fgGameStatus: state => state.mutations.fgGameStatus, //电游开关
      })
    },
    activated() {
      if (this.$route.query.perIndex) {
        this.listId = parseInt(this.$route.query.id) || parseInt(this.$route.query.perIndex);
      } else if (this.$route.query.treeIndex) {
        this.listId = parseInt(this.$route.query.id) || parseInt(this.$route.query.treeIndex);
      } else {
        this.listId = parseInt(this.$route.query.id);
      }
      this.init();
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let height = $(window).height();
        $('.lotteryTree').height(height - 68 - 62);
        $('.treeListBox').height(height - 68 - 257);
        this.curAmoIndex = 0;
        this.isShowAmoMessBox = false;
      },
      initData() {
        if (this.isAgent == '1') {
          this.lotteryTreeData.listData = [
            {
              navId: 1,
              title: "我的彩票",
              icon: require('../../../assets/images/personal/treeIcon/per1.png'),
            },
            {
              navId: 2,
              title: "账号信息",
              icon: require('../../../assets/images/personal/treeIcon/per2.png'),
            },
            {
              navId: 3,
              title: "投注记录",
              icon: require('../../../assets/images/personal/treeIcon/per3.png'),
            },
            {
              navId: 4,
              title: "账户明细",
              icon: require('../../../assets/images/personal/treeIcon/per4.png'),
            },
            {
              navId: 5,
              title: "充值",
              icon: require('../../../assets/images/personal/treeIcon/per5.png'),
            },
            {
              navId: 6,
              title: "提现",
              icon: require('../../../assets/images/personal/treeIcon/per6.png'),
            },
            {
              navId: 7,
              title: "代理中心",
              icon: require('../../../assets/images/personal/treeIcon/per7.png'),
            },
            {
              navId: 8,
              title: "代理报表",
              icon: require('../../../assets/images/personal/treeIcon/per7.png'),
            }
          ];
        } else {
          this.lotteryTreeData.listData = [
            {
              navId: 1,
              title: "我的彩票",
              icon: require('../../../assets/images/personal/treeIcon/per1.png'),
            },
            {
              navId: 2,
              title: "账号信息",
              icon: require('../../../assets/images/personal/treeIcon/per2.png'),
            },
            {
              navId: 3,
              title: "投注记录",
              icon: require('../../../assets/images/personal/treeIcon/per3.png'),
            },
            {
              navId: 4,
              title: "账户明细",
              icon: require('../../../assets/images/personal/treeIcon/per4.png'),
            },
            {
              navId: 5,
              title: "充值",
              icon: require('../../../assets/images/personal/treeIcon/per5.png'),
            },
            {
              navId: 6,
              title: "提现",
              icon: require('../../../assets/images/personal/treeIcon/per6.png'),
            }
          ]
        }
        if (this.fgGameStatus) {
          this.amountNavTitData = ['账户余额', '电游余额'];
        } else {
          this.amountNavTitData = ['账户余额'];
        }
      },
      initUserInfo() {
        if (this.userInfo) {
          this.userMessage.userName = this.userInfo.memberInfo.username;
          this.userMessage.amount = this.userInfo.memberInfo.amount;
          this.userMessage.fgAmount = this.userInfo.memberInfo.fgAmount;
          this.isAgent = this.userInfo.memberInfo.type;
          this.initData();
        }
      },
      showSecondTree(index) {
        let that = this,
          thatName = '';
        that.listId = index;
        switch (parseInt(index)) {
          case 0:
            thatName = 'myLottery';
            break;
          case 1:
            thatName = 'userInfo';
            break;
          case 2:
            thatName = 'bettingRecord';
            break;
          case 3:
            thatName = 'accountDetails';
            break;
          case 4:
            thatName = 'topUp';
            break;
          case 5:
            thatName = 'withdrawal';
            break;
          case 6:
            thatName = 'agency';
            break;
          case 7:
            thatName = 'statement';
            break;
        }
        let query;
        if (that.$route.query.perIndex == 3) {
          query = {
            id: index,
            actionType: that.$route.query.actionType,
          };
        } else if (index == 1) {
          query = {
            id: index,
            type: that.$route.query.type || '-1',
          };
        }else if (index == 2) {
          query = {
            id: index,
            betType: that.$route.query.betType || '0',
          };
        } else {
          query = {
            id: index
          };
        }
        that.$router.push({name: thatName, query: query});
      },
      //余额切换
      amoNavTitEvent(index) {
        this.curAmoIndex = index;
      },
      //电游余额转入转出点击事件
      amountChangeEnent(type) {
        this.isShowAmoMessBox = true;
        if (type == '0') {
          //转入
          this.isRollin = true;
          this.amoMessTitTxt = '额度转入';
          this.amoMessConTxt = '可转入余额(元)';
          this.placeholderTxt = '请输入转入金额（不可超过可转入金额）';
        }
        if (type == '1') {
          //转出
          this.isRollin = false;
          this.amoMessTitTxt = '额度转出';
          this.amoMessConTxt = '可转出余额(元)';
          this.placeholderTxt = '请输入转出金额（不可超过可转出金额）';
        }
      },
      //关闭余额弹出层
      closeAmoMess() {
        this.isShowAmoMessBox = false;
        this.fgRollAmount = '';
      },
      confirmRollEvent() {
        let path = '';
        if (this.fgRollAmount == '' || this.fgRollAmount <= 0) {
          this._Util.showAlert('输入金额必须大于0');
          return;
        }
        if (this.isRollin) {
          path = this._Api.POST_FG_ROLLIN;
          if (this.fgRollAmount > this.userMessage.amount) {
            this._Util.showAlert('输入金额不能大于账户金额');
            return;
          }
        } else {
          if (this.fgRollAmount > this.userMessage.fgAmount) {
            this._Util.showAlert('输入金额不能大于电游金额');
            return;
          }
          path = this._Api.POST_FG_ROLLOUT;
        }
        this.amountProEvent(path);
      },
      //余额转入转出
      amountProEvent(path) {
        let that = this;
        if (that.amountProLock) return;
        that.amountProLock = true;
        let params = {
          amount: this.fgRollAmount || 0,
        }
        that._Util.post(that, path, params, (data, dataAll) => {
          that.amountProLock = false;
          that._Util.showAlert(dataAll.msg);
          if (this.isRollin) {
            that.fgRollAmount = 0 - that.fgRollAmount;
          } else {
            that.fgRollAmount = that.fgRollAmount;
          }
          that.userInfo.memberInfo.amount = that.userInfo.memberInfo.amount*1 + that.fgRollAmount*1;
          that.userInfo.memberInfo.fgAmount = that.userInfo.memberInfo.fgAmount*1 - that.fgRollAmount*1;
          that.closeAmoMess();
        }, (data) => {
          that.amountProLock = false;
          that._Util.showAlert(data.msg);
        }, 'post', true);
      },
    },
    components: {},
    watch: {
      '$route.query.id'() {
        let index = parseInt(this.$route.query.id);
        if ((!index && this.$router.history.current.name !== 'myLottery') || index < 0) return;
        this.listId = index;
        this.showSecondTree(index);
      },
      '$route.query.perIndex'(val) {
        this.listId = parseInt(this.$route.query.id) || parseInt(val);
      },
      '$route.query.treeIndex'(val) {
        this.listId = parseInt(this.$route.query.id) || parseInt(val);
      },
      'userInfo'() {
        this.initUserInfo();
      },
      'userInfo.memberInfo.amount'(val) {
        this.userMessage.amount = val;
      },
      'userInfo.memberInfo.fgAmount'(val) {
        this.userMessage.fgAmount = val;
      },
      'fgGameStatus'() {
        this.initUserInfo();
      }
    }
  }
</script>
